<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上传日志</title>
    <link rel="stylesheet" type="text/css" href="../../../admin/css/log/upload.css" />
  </head>
  <body>
    <div class="log-upload-page flex-col">
      <div class="flex-row p40">
        <div class="groupu_5 flex-col">
          <div class="groupu_6 flex-row justify-between">
            <img
              class="thumbnail_9"
              referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/SketchPng7f554dc5fd0c16457edde0cbaa24ae67a5d4a0bc9fe18f47997713104b821adb"
            />
            <span class="textu_15"
              >如若复制/删除路径，请右击所对应附件，请注意删除文件后是不可恢复的！</span
            >
          </div>
          <div class="groupu_7 flex-col"></div>
          <div class="groupu_8 flex-row">
            <div class="section_9 flex-col justify-between">
              <img
                class="image_1"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_16">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_1"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_16">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_1"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_16">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_1"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_16">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_1"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_16">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_1"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_16">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_1"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_16">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_1"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_16">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_1"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_16">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_3"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_18">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_4"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_19">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_5"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_20">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_6"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_21">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_7"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng83fd351904394f2ecfab9e3b4b3967f3ad3ccacebdb9fb3d968608498fdb50c1"
              />
              <span class="textu_22">文件名.zip</span>
            </div>
            <div class="section_9 flex-col justify-between">
              <img
                class="image_8"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4d9268ad8c1e47f792df5ba1667ad0f418c221f408052db8adc27de20f6efdf0"
              />
              <span class="textu_23">文件名.pdf</span>
            </div>
            <div class="section_9 flex-col justify-between" data-id="20">
              <img
                class="image_9"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng83fd351904394f2ecfab9e3b4b3967f3ad3ccacebdb9fb3d968608498fdb50c1"
              />
              <span class="textu_24">文件名.zip</span>
            </div>
          </div>
          <div class="groupu_9" id="contextMenu">
            <div class="groupu_10 flex-row justify-between" onclick="menuAction('copy')">
              <i class="layui-icon layui-icon-file" style="font-size: 20px;color: #fff;"></i> 
              <span class="textu_25">复制路径</span>
            </div>
            <div class="image-textu_4 flex-row justify-between" onclick="menuAction('delete')">
              <i class="layui-icon layui-icon-delete" style="font-size: 20px;color: #fff;"></i>
              <span class="text-groupu_4">删除附件</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      let currentDiv = null

      layui.use(['layer'], function(){
        var layer = layui.layer;
        var sections = document.querySelectorAll('.section_9');

        sections.forEach(function(section){
          section.addEventListener('contextmenu', function(e){
            e.stopPropagation(); // 阻止事件冒泡
            e.preventDefault();
            //layer.msg('你选择了: ' + this.textContent);

            currentDiv = this;
            var menu = document.getElementById('contextMenu');
            menu.style.display = 'block';
            //layer.msg(e.pageX + ',' + e.pageY)
            menu.style.left = e.pageX - 250 + 'px';
            menu.style.top = e.pageY - 100 + 'px';

            //点击页面其他地方时隐藏菜单
            window.addEventListener('click', hideMenu);
            window.addEventListener('contextmenu', hideMenu);
            function hideMenu() {
              menu.style.display = 'none';
              window.removeEventListener('click', hideMenu);
              window.removeEventListener('contextmenu', hideMenu);
            }
          });
        });
      });

      // 菜单项点击处理
      function menuAction(option) {
        layer.msg('你选择了: ' + option+currentDiv.getAttribute('data-id'));
      }
    </script>
  </body>
</html>
